<div class="ngm-theme-dark dark w-[400px] shrink-0 flex flex-col justify-start overflow-auto bg-bluegray-700 text-white p-4 group">
  <div class="w-full flex justify-start items-center my-2" cdkDrag cdkDragRootElement=".cdk-overlay-pane" cdkDragHandle>
    <mat-icon displayDensity="cosy" class="-ml-2 opacity-0 group-hover:opacity-80">drag_indicator</mat-icon>
    <span class="text-lg pointer-events-none">
      {{ 'PAC.MODEL.CREATE_TABLE.TITLE' | translate: {Default: 'Create table'} }}
    </span>
  </div>

  <mat-horizontal-stepper linear #stepper orientation="vertical" (selectionChange)="onStepChange($event)">
    <mat-step [stepControl]="form" errorMessage="File is required.">

      <ng-template matStepLabel>
        {{ 'PAC.MODEL.CREATE_TABLE.AddFile' | translate: {Default: "Add File"} }}
      </ng-template>

      <form [formGroup]="form" class="grid grid-cols-2 gap-x-4">
        <mat-form-field class="col-span-2" appearance="fill" color="accent">
          <mat-label>{{ 'PAC.MODEL.CREATE_TABLE.Name' | translate: {Default: 'Name'} }}</mat-label>
          <input matInput formControlName="name" />
          <mat-error *ngIf="name.invalid">{{getErrorMessage()}}</mat-error>
        </mat-form-field>

        <mat-form-field class="col-span-2" appearance="fill" color="accent">
          <mat-label>{{ 'PAC.MODEL.CREATE_TABLE.Type' | translate: {Default: 'Type'} }}</mat-label>
          <mat-select formControlName="type">
            <mat-option value="csv">CSV</mat-option>
            <mat-option value="json">JSON</mat-option>
            <mat-option value="parquet">Parquet</mat-option>
            <mat-option value="excel">Excel</mat-option>
          </mat-select>
        </mat-form-field>

        <ng-container *ngIf="type === 'csv'">
          <div class="flex items-center">
            <mat-checkbox formControlName="header" >{{ 'PAC.MODEL.CREATE_TABLE.HasHeader' | translate: {Default: 'Has Header'} }}</mat-checkbox>
          </div>

          <mat-form-field *ngIf="type === 'csv'" appearance="fill" color="accent">
            <mat-label>{{ 'PAC.MODEL.CREATE_TABLE.Delimiter' | translate: {Default: 'Delimiter'} }}</mat-label>
            <input matInput formControlName="delimiter" [placeholder]=" 'PAC.MODEL.CREATE_TABLE.DefaultDelimiter' | translate: {Default: 'Default: ,'} "/>
          </mat-form-field>
        </ng-container>
    
        <mat-form-field appearance="fill" color="accent" class="col-span-2">
          <mat-label>{{ 'PAC.MODEL.CREATE_TABLE.Url' | translate: {Default: 'Url'} }}</mat-label>
          <input matInput formControlName="sourceUrl" />
        </mat-form-field>
    
      </form>
    </mat-step>

    <mat-step>
      <ng-template matStepLabel>
        {{ 'PAC.MODEL.CREATE_TABLE.DataPreview' | translate: {Default: "Data Preview"} }}
      </ng-template>

      <div *ngIf="error" class="ngm-card-error" style="position: relative;">
        <span class="title-icon font-notoColorEmoji">🐞</span>
        <span>
          {{ error }}
        </span>
      </div>

      <mat-nav-list cdkTrapFocus cdkTrapFocusAutoCapture>
        <mat-list-item *ngFor="let sheet of sheets$ | async" [class.active]="activeLink === sheet.name"
          (click)="activeSheet(sheet)">
          <span class="w-full p-2 ">
            <input matInput [(ngModel)]="sheet.tableName" class="w-full "
              [placeholder]=" 'PAC.MODEL.CREATE_TABLE.InputTableName' | translate: {Default: 'Input Table Name'} "
              (keydown)="onKeyup($event)"/>
          </span>
        </mat-list-item>
      </mat-nav-list>
    </mat-step>
  </mat-horizontal-stepper>

  <div class="flex-1"></div>

  <div class="flex justify-start items-center">
    <div ngmButtonGroup>
      <button mat-raised-button color="accent" cdkFocusInitial
        [disabled]="stepper.selected?.stepControl?.invalid || error"
        (click)="onAppy()">
        {{ 'COMPONENTS.COMMON.APPLY' | translate: { Default: 'Apply' } }}
      </button>
      <button *ngIf="stepper.selectedIndex < 1 && type !== 'parquet' " mat-raised-button color="accent"
        [disabled]="stepper.selected?.stepControl?.invalid"
        (click)="stepper.next()"
      >
        {{ 'PAC.ACTIONS.NEXT' | translate: {Default: "Next"} }}
      </button>

      <button mat-button mat-dialog-close>
        {{ 'COMPONENTS.COMMON.CANCEL' | translate: { Default: 'Cancel' } }}
      </button>
    </div>
  </div>
</div>

<div class="flex flex-col overflow-hidden relative">
  <mat-progress-bar *ngIf="isLoading" mode="determinate" [value]="progress" color="accent" class="absolute w-full top-0 left-0" style="position: absolute;"></mat-progress-bar>

  <div *ngIf="stepper.selectedIndex === 0" class="relative w-[600px] flex-1 flex m-4 border-2 border-gray-300 border-dashed rounded-lg 
    bg-gray-50 dark:border-neutral-600 dark:bg-neutral-800"
    ngmDnd (fileDropped)="onFileDropped($event)"
  >
    <input type="file" #fileDropRef id="fileDropRef" multiple class="invisible"
      (change)="fileBrowseHandler($event.target)"
      (click)="fileDropRef.value=null;"/>
    <div class="absolute top-0 left-0 w-full h-full flex flex-col justify-center items-center">
      <svg width="100" height="100">
        <circle cx="50" cy="50" r="40" fill="#80808050"/>
        <rect x="25" y="48" width="50" height="4" fill="white"/>
        <rect x="48" y="25" width="4" height="50" fill="white"/>
      </svg>

      <p class="mb-2 text-sm text-gray-500 dark:text-gray-400">
        {{ 'PAC.MODEL.CREATE_TABLE.DragandDropFile' | translate: {Default: 'Drag and drop to add file'} }}
      </p>
      <h3 class="text-sm text-gray-500 dark:text-gray-400">
        {{ 'PAC.MODEL.CREATE_TABLE.Or' | translate: {Default: 'or'} }}
      </h3>
      
	    <label for="fileDropRef" class="block text-sm text-slate-500
        py-2 px-4
        rounded-full border-0 font-semibold
        bg-gray-100
        hover:bg-bluegray-200
        dark:bg-neutral-700 dark:text-neutral-200"
        >
        <span class="sr-only">Choose a file</span>
        <span>
          {{ 'PAC.MODEL.CREATE_TABLE.BrowseForFile' | translate: {Default: 'Browse for file'} }}
        </span>
      </label>

      <div *ngIf="storageFile" class="flex justify-end items-center">
        {{storageFile.originalName}}

        <button mat-icon-button ngmAppearance="danger" displayDensity="cosy" (click)="removeStorageFile()">
          <mat-icon>close</mat-icon> 
        </button>
      </div>
    </div>
    
  </div>

  <div *ngIf="stepper.selectedIndex === 1" class="flex min-w-[400px] overflow-hidden h-full">
    <mat-progress-spinner *ngIf="isLoading" strokeWidth="2" color="accent" diameter="50" [value]="progress" class="ngm-card__loading" style="margin: auto;"></mat-progress-spinner>
    <div *ngFor="let sheet of activedSheets" class="flex w-full">
      <div class="w-full overflow-auto" displayDensity="compact">
        <table mat-table [dataSource]="sheet.preview" class="mat-elevation-z">
          <ng-container *ngFor="let header of sheet.columns" [matColumnDef]="header.name">
            <th mat-header-cell *matHeaderCellDef>
              <div class="p-2 flex flex-col justify-start items-start">
                <mat-select [(ngModel)]="header.type" class="ngm-select p-2" placeholder="{{ 'PAC.MODEL.CREATE_TABLE.Type' | translate: {Default: 'Type'} }}">
                  <mat-option value="String">String</mat-option>
                  <mat-option value="Number">Integer</mat-option>
                  <mat-option value="Numeric">Numeric</mat-option>
                  <mat-option value="Date">Date</mat-option>
                </mat-select>

                <input matInput [(ngModel)]="header.fieldName" class="ngm-input hover:bg-slate-100 dark:hover:bg-neutral-700" />
              </div>
            </th>
            <td mat-cell *matCellDef="let element"> {{element[header.name]}} </td>
          </ng-container>
  
          <tr mat-header-row *matHeaderRowDef="sheet.displayedColumns; sticky: true" class="bg-gray-100"></tr>
          <tr mat-row *matRowDef="let row; columns: sheet.displayedColumns;"></tr>
        </table>
      </div>
    </div>
    
  </div>
</div>
